const TodoFooter = ({itemList,tabtype,setTabType,clearItem}) => {
  // 未完成数目
  const incompletenum = itemList.filter((item)=>item.finish !== true).length 
  // tab 栏
  const tabarr = ['All','Active','Completed']
  return (
    <footer className="footer">
      <span className="todo-count">
        <strong>{incompletenum}</strong> item left
      </span>
      <ul className="filters">
        {
          tabarr.map((item)=><li key={item} onClick={()=>setTabType(item)}>
            <a className={tabtype === item ? 'selected' : ''} href="#/">
              {item}
            </a>
          </li>)
        }
      </ul>
      <button className="clear-completed" onClick={()=>clearItem()}>Clear completed</button>
    </footer>
  )
}

export default TodoFooter
